<template>
  <div class="fraud-trend-analysis">
    <div class="page-header">
      <div class="header-info">
        <h1>诈骗趋势分析</h1>
        <p>分析诈骗类型趋势和预警预测</p>
      </div>
      <div class="header-actions">
        <el-button type="primary" @click="exportReport">
          <el-icon><Document /></el-icon>
          导出报告
        </el-button>
        <el-button @click="refreshData">
          <el-icon><Refresh /></el-icon>
          刷新数据
        </el-button>
      </div>
    </div>

    <!-- 趋势概览 -->
    <div class="trend-overview">
      <div class="overview-stats">
        <div class="stat-card">
          <div class="stat-icon">🚨</div>
          <div class="stat-info">
            <div class="stat-value">{{ formatNumber(stats.fraudCases) }}</div>
            <div class="stat-label">识别诈骗案例</div>
            <div class="stat-trend positive">+{{ stats.fraudGrowth }}%</div>
          </div>
        </div>
        <div class="stat-card">
          <div class="stat-icon">💰</div>
          <div class="stat-info">
            <div class="stat-value">¥{{ formatNumber(stats.savedAmount) }}</div>
            <div class="stat-label">挽回损失金额</div>
            <div class="stat-trend positive">+{{ stats.savedGrowth }}%</div>
          </div>
        </div>
        <div class="stat-card">
          <div class="stat-icon">🛡️</div>
          <div class="stat-info">
            <div class="stat-value">{{ stats.interceptRate }}%</div>
            <div class="stat-label">拦截成功率</div>
            <div class="stat-trend positive">+{{ stats.interceptGrowth }}%</div>
          </div>
        </div>
        <div class="stat-card">
          <div class="stat-icon">⚡</div>
          <div class="stat-info">
            <div class="stat-value">{{ stats.responseTime }}s</div>
            <div class="stat-label">平均响应时间</div>
            <div class="stat-trend positive">-{{ stats.responseImprovement }}s</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 趋势图表 -->
    <div class="trend-charts">
      <div class="chart-section">
        <h3>📈 诈骗案例趋势</h3>
        <div class="chart-container">
          <div ref="trendChart" class="chart"></div>
        </div>
      </div>

      <div class="chart-section">
        <h3>🎯 诈骗类型分布</h3>
        <div class="chart-container">
          <div ref="typeChart" class="chart"></div>
        </div>
      </div>

      <div class="chart-section">
        <h3>🗺️ 地域分布分析</h3>
        <div class="chart-container">
          <div ref="regionChart" class="chart"></div>
        </div>
      </div>

      <div class="chart-section">
        <h3>📊 损失金额分析</h3>
        <div class="chart-container">
          <div ref="lossChart" class="chart"></div>
        </div>
      </div>
    </div>

    <!-- 热点分析 -->
    <div class="hotspot-analysis">
      <div class="analysis-card">
        <h3>🔥 当前热点诈骗</h3>
        <div class="hotspot-list">
          <div v-for="hotspot in hotspots" :key="hotspot.id" class="hotspot-item">
            <div class="hotspot-header">
              <div class="hotspot-title">{{ hotspot.title }}</div>
              <div class="hotspot-level" :class="hotspot.level">{{ getLevelText(hotspot.level) }}</div>
            </div>
            <div class="hotspot-desc">{{ hotspot.description }}</div>
            <div class="hotspot-stats">
              <span class="stat">影响用户: {{ formatNumber(hotspot.affectedUsers) }}</span>
              <span class="stat">涉及金额: ¥{{ hotspot.amount }}</span>
              <span class="stat">增长率: {{ hotspot.growth }}%</span>
            </div>
          </div>
        </div>
      </div>

      <div class="analysis-card">
        <h3>🎯 受害群体分析</h3>
        <div class="victim-analysis">
          <div class="victim-group">
            <h4>年龄分布</h4>
            <div class="age-stats">
              <div class="age-item" v-for="age in ageDistribution" :key="age.range">
                <span class="age-range">{{ age.range }}</span>
                <div class="age-bar">
                  <div class="age-fill" :style="{ width: age.percentage + '%' }"></div>
                </div>
                <span class="age-percent">{{ age.percentage }}%</span>
              </div>
            </div>
          </div>

          <div class="victim-group">
            <h4>损失金额分布</h4>
            <div class="loss-stats">
              <div class="loss-item" v-for="loss in lossDistribution" :key="loss.range">
                <span class="loss-range">{{ loss.range }}</span>
                <span class="loss-percent">{{ loss.percentage }}%</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 预警系统 -->
    <div class="warning-system">
      <div class="warning-card">
        <h3>⚠️ 风险预警</h3>
        <div class="warning-list">
          <div v-for="warning in warnings" :key="warning.id" class="warning-item" :class="warning.level">
            <div class="warning-header">
              <div class="warning-title">{{ warning.title }}</div>
              <div class="warning-level">{{ getLevelText(warning.level) }}</div>
            </div>
            <div class="warning-desc">{{ warning.description }}</div>
            <div class="warning-time">{{ warning.time }}</div>
          </div>
        </div>
      </div>

      <div class="prediction-card">
        <h3>📊 趋势预测</h3>
        <div class="prediction-content">
          <div class="prediction-item">
            <div class="prediction-title">下月预测</div>
            <div class="prediction-stats">
              <div class="pred-stat">
                <span class="pred-label">预计案例</span>
                <span class="pred-value">{{ formatNumber(predictions.nextMonth.cases) }}</span>
              </div>
              <div class="pred-stat">
                <span class="pred-label">预计损失</span>
                <span class="pred-value">¥{{ formatNumber(predictions.nextMonth.loss) }}</span>
              </div>
            </div>
          </div>
          
          <div class="prediction-item">
            <div class="prediction-title">季度预测</div>
            <div class="prediction-stats">
              <div class="pred-stat">
                <span class="pred-label">预计案例</span>
                <span class="pred-value">{{ formatNumber(predictions.nextQuarter.cases) }}</span>
              </div>
              <div class="pred-stat">
                <span class="pred-label">预计损失</span>
                <span class="pred-value">¥{{ formatNumber(predictions.nextQuarter.loss) }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 防护建议 -->
    <div class="protection-advice">
      <div class="advice-card">
        <h3>🛡️ 防护建议</h3>
        <div class="advice-content">
          <div class="advice-section">
            <h4>用户教育</h4>
            <ul>
              <li>加强反诈骗知识宣传，提高用户防范意识</li>
              <li>定期推送最新诈骗手法和防范技巧</li>
              <li>建立用户反馈机制，及时收集诈骗信息</li>
            </ul>
          </div>
          
          <div class="advice-section">
            <h4>技术防护</h4>
            <ul>
              <li>完善AI识别算法，提高检测准确率</li>
              <li>建立实时监控系统，快速发现异常</li>
              <li>加强与银行、通信运营商的合作</li>
            </ul>
          </div>
          
          <div class="advice-section">
            <h4>政策建议</h4>
            <ul>
              <li>建立跨部门联动机制，统一打击诈骗</li>
              <li>完善相关法律法规，加大惩罚力度</li>
              <li>建立诈骗案例数据库，便于分析研究</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Document, Refresh } from '@element-plus/icons-vue'
import * as echarts from 'echarts'

// 图表引用
const trendChart = ref(null)
const typeChart = ref(null)
const regionChart = ref(null)
const lossChart = ref(null)

// 图表实例
let trendChartInstance = null
let typeChartInstance = null
let regionChartInstance = null
let lossChartInstance = null

// 统计数据
const stats = reactive({
  fraudCases: 3456,
  fraudGrowth: 18.5,
  savedAmount: 230000000,
  savedGrowth: 22.3,
  interceptRate: 89.7,
  interceptGrowth: 3.2,
  responseTime: 1.8,
  responseImprovement: 0.3
})

// 热点诈骗
const hotspots = ref([
  {
    id: 1,
    title: '投资理财诈骗',
    level: 'high',
    description: '以高收益投资为诱饵，诱导用户转账投资',
    affectedUsers: 15600,
    amount: '3.2亿',
    growth: 25.3
  },
  {
    id: 2,
    title: '冒充客服诈骗',
    level: 'medium',
    description: '冒充官方客服，以退款为由获取用户信息',
    affectedUsers: 8900,
    amount: '1.8亿',
    growth: 12.7
  },
  {
    id: 3,
    title: '网络兼职诈骗',
    level: 'low',
    description: '以高薪兼职为诱饵，要求缴纳押金',
    affectedUsers: 5400,
    amount: '0.9亿',
    growth: 8.5
  }
])

// 年龄分布
const ageDistribution = ref([
  { range: '18-30岁', percentage: 25 },
  { range: '31-45岁', percentage: 35 },
  { range: '46-60岁', percentage: 30 },
  { range: '60岁以上', percentage: 10 }
])

// 损失金额分布
const lossDistribution = ref([
  { range: '1千以下', percentage: 45 },
  { range: '1千-1万', percentage: 30 },
  { range: '1万-10万', percentage: 20 },
  { range: '10万以上', percentage: 5 }
])

// 预警信息
const warnings = ref([
  {
    id: 1,
    title: '新型投资诈骗抬头',
    level: 'high',
    description: '最近发现多起以虚拟货币投资为名的诈骗案例',
    time: '2024-01-15 14:30'
  },
  {
    id: 2,
    title: '网购退款诈骗增多',
    level: 'medium',
    description: '冒充电商客服进行退款诈骗的案例有所增加',
    time: '2024-01-15 10:20'
  },
  {
    id: 3,
    title: '刷单诈骗持续活跃',
    level: 'low',
    description: '以网络刷单为名的诈骗案例保持较高活跃度',
    time: '2024-01-15 08:15'
  }
])

// 趋势预测
const predictions = reactive({
  nextMonth: {
    cases: 4200,
    loss: 180000000
  },
  nextQuarter: {
    cases: 12600,
    loss: 540000000
  }
})

// 方法
const formatNumber = (number) => {
  if (number >= 100000000) {
    return (number / 100000000).toFixed(1) + '亿'
  } else if (number >= 10000) {
    return (number / 10000).toFixed(1) + '万'
  } else if (number >= 1000) {
    return (number / 1000).toFixed(1) + 'K'
  }
  return number.toString()
}

const getLevelText = (level) => {
  const levelMap = {
    high: '高风险',
    medium: '中风险',
    low: '低风险'
  }
  return levelMap[level] || level
}

const refreshData = async () => {
  try {
    await new Promise(resolve => setTimeout(resolve, 1000))
    stats.fraudCases += Math.floor(Math.random() * 50)
    ElMessage.success('数据刷新成功')
  } catch (error) {
    ElMessage.error('数据刷新失败')
  }
}

const exportReport = () => {
  ElMessage.success('正在导出诈骗趋势分析报告...')
}

// 初始化趋势图表
const initTrendChart = () => {
  if (!trendChart.value) return
  
  trendChartInstance = echarts.init(trendChart.value)
  
  const option = {
    title: {
      text: '诈骗案例趋势分析',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      }
    },
    legend: {
      data: ['案例数量', '损失金额(万)', '拦截数量'],
      top: 30
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    },
    yAxis: [
      {
        type: 'value',
        name: '案例数量',
        position: 'left'
      },
      {
        type: 'value',
        name: '金额(万)',
        position: 'right'
      }
    ],
    series: [
      {
        name: '案例数量',
        type: 'line',
        data: [280, 320, 380, 420, 380, 450, 500, 420, 380, 320, 280, 240],
        smooth: true,
        itemStyle: { color: '#e74c3c' }
      },
      {
        name: '损失金额(万)',
        type: 'bar',
        yAxisIndex: 1,
        data: [1200, 1400, 1600, 1800, 1600, 1900, 2100, 1800, 1600, 1400, 1200, 1000],
        itemStyle: { color: '#f39c12' }
      },
      {
        name: '拦截数量',
        type: 'line',
        data: [250, 290, 340, 380, 350, 410, 460, 380, 340, 290, 250, 220],
        smooth: true,
        itemStyle: { color: '#27ae60' }
      }
    ]
  }
  
  trendChartInstance.setOption(option)
}

// 初始化类型分布图表
const initTypeChart = () => {
  if (!typeChart.value) return
  
  typeChartInstance = echarts.init(typeChart.value)
  
  const option = {
    title: {
      text: '诈骗类型分布',
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '诈骗类型',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 32, name: '电信诈骗' },
          { value: 28, name: '网络购物诈骗' },
          { value: 22, name: '金融理财诈骗' },
          { value: 12, name: '交友诈骗' },
          { value: 6, name: '其他' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  
  typeChartInstance.setOption(option)
}

// 初始化地域分布图表
const initRegionChart = () => {
  if (!regionChart.value) return
  
  regionChartInstance = echarts.init(regionChart.value)
  
  const option = {
    title: {
      text: '诈骗地域分布',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    xAxis: {
      type: 'category',
      data: ['北京', '上海', '广州', '深圳', '杭州', '成都', '重庆', '武汉', '西安', '其他']
    },
    yAxis: {
      type: 'value',
      name: '案例数量'
    },
    series: [
      {
        name: '案例数量',
        type: 'bar',
        data: [450, 420, 380, 350, 320, 280, 260, 240, 220, 580],
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#ff6b6b' },
            { offset: 1, color: '#ee5a24' }
          ])
        }
      }
    ]
  }
  
  regionChartInstance.setOption(option)
}

// 初始化损失金额分析图表
const initLossChart = () => {
  if (!lossChart.value) return
  
  lossChartInstance = echarts.init(lossChart.value)
  
  const option = {
    title: {
      text: '损失金额分析',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        name: '损失金额',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '20',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 45, name: '1千以下' },
          { value: 30, name: '1千-1万' },
          { value: 20, name: '1万-10万' },
          { value: 5, name: '10万以上' }
        ]
      }
    ]
  }
  
  lossChartInstance.setOption(option)
}

// 生命周期
onMounted(() => {
  setTimeout(() => {
    initTrendChart()
    initTypeChart()
    initRegionChart()
    initLossChart()
  }, 100)
})

onUnmounted(() => {
  if (trendChartInstance) {
    trendChartInstance.dispose()
  }
  if (typeChartInstance) {
    typeChartInstance.dispose()
  }
  if (regionChartInstance) {
    regionChartInstance.dispose()
  }
  if (lossChartInstance) {
    lossChartInstance.dispose()
  }
})
</script>

<style scoped>
.fraud-trend-analysis {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 30px;
}

.header-info h1 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 28px;
}

.header-info p {
  margin: 0;
  color: #666;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.trend-overview {
  margin-bottom: 30px;
}

.overview-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.stat-card {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  gap: 15px;
}

.stat-icon {
  font-size: 40px;
  width: 60px;
  text-align: center;
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}

.stat-trend {
  font-size: 12px;
  font-weight: bold;
}

.stat-trend.positive {
  color: #67c23a;
}

.stat-trend.negative {
  color: #f56c6c;
}

.trend-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.chart-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.chart-section h3 {
  margin: 0 0 15px 0;
  color: #333;
  font-size: 16px;
}

.chart-container {
  height: 300px;
}

.chart {
  width: 100%;
  height: 100%;
}

.hotspot-analysis {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  margin-bottom: 30px;
}

.analysis-card {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.analysis-card h3 {
  margin: 0 0 15px 0;
  color: #333;
  font-size: 16px;
}

.hotspot-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.hotspot-item {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 6px;
  border-left: 4px solid #409eff;
}

.hotspot-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.hotspot-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.hotspot-level {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
}

.hotspot-level.high {
  background: #fff3cd;
  color: #856404;
}

.hotspot-level.medium {
  background: #d1ecf1;
  color: #0c5460;
}

.hotspot-level.low {
  background: #d4edda;
  color: #155724;
}

.hotspot-desc {
  color: #666;
  margin-bottom: 10px;
  line-height: 1.4;
}

.hotspot-stats {
  display: flex;
  gap: 15px;
  font-size: 12px;
}

.hotspot-stats .stat {
  color: #999;
}

.victim-analysis {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.victim-group h4 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 14px;
}

.age-stats {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.age-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.age-range {
  width: 60px;
  font-size: 12px;
  color: #666;
}

.age-bar {
  flex: 1;
  height: 6px;
  background: #f0f0f0;
  border-radius: 3px;
  overflow: hidden;
}

.age-fill {
  height: 100%;
  background: linear-gradient(90deg, #409eff, #67c23a);
}

.age-percent {
  width: 30px;
  text-align: right;
  font-size: 12px;
  color: #666;
}

.loss-stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.loss-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid #f0f0f0;
}

.loss-range {
  font-size: 12px;
  color: #666;
}

.loss-percent {
  font-size: 12px;
  color: #333;
  font-weight: bold;
}

.warning-system {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 30px;
}

.warning-card, .prediction-card {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.warning-card h3, .prediction-card h3 {
  margin: 0 0 15px 0;
  color: #333;
  font-size: 16px;
}

.warning-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.warning-item {
  padding: 12px;
  border-radius: 6px;
  border-left: 4px solid #409eff;
}

.warning-item.high {
  background: #fff3cd;
  border-left-color: #ffc107;
}

.warning-item.medium {
  background: #d1ecf1;
  border-left-color: #17a2b8;
}

.warning-item.low {
  background: #d4edda;
  border-left-color: #28a745;
}

.warning-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.warning-title {
  font-size: 14px;
  font-weight: bold;
  color: #333;
}

.warning-level {
  font-size: 12px;
  color: #666;
}

.warning-desc {
  font-size: 12px;
  color: #666;
  margin-bottom: 5px;
  line-height: 1.4;
}

.warning-time {
  font-size: 11px;
  color: #999;
}

.prediction-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.prediction-item {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 6px;
}

.prediction-title {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.prediction-stats {
  display: flex;
  justify-content: space-between;
  gap: 15px;
}

.pred-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pred-label {
  font-size: 12px;
  color: #666;
  margin-bottom: 5px;
}

.pred-value {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.protection-advice {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.advice-card h3 {
  margin: 0 0 20px 0;
  color: #333;
  font-size: 16px;
}

.advice-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.advice-section {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 6px;
}

.advice-section h4 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 14px;
}

.advice-section ul {
  margin: 0;
  padding-left: 20px;
}

.advice-section li {
  margin-bottom: 8px;
  font-size: 14px;
  color: #666;
  line-height: 1.4;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    gap: 15px;
  }
  
  .overview-stats {
    grid-template-columns: 1fr;
  }
  
  .trend-charts {
    grid-template-columns: 1fr;
  }
  
  .hotspot-analysis {
    grid-template-columns: 1fr;
  }
  
  .warning-system {
    grid-template-columns: 1fr;
  }
  
  .advice-content {
    grid-template-columns: 1fr;
  }
}
</style> 